<template>
  <div class="vue3-cron-div">
    <!-- <el-button class="language" type="primary" @click="state.language = state.language === 'en' ? 'cn' : 'en'">
      {{ state.language === 'en' ? 'cn' : 'en' }}
    </el-button> -->
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label>
          <span>
            <i class="el-icon-date"></i>
            {{ state.text.Seconds.name }}
          </span>
        </template>
        <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
          <el-row>
            <el-radio v-model="state.second.cronEvery" label="1">{{ state.text.Seconds.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.second.cronEvery" label="2">
              {{ state.text.Seconds.interval[0] }}
              <el-input-number v-model="state.second.incrementIncrement" :max="60" :min="1" size="small" />
              {{ state.text.Seconds.interval[1] || '' }}
              <el-input-number v-model="state.second.incrementStart" :max="59" :min="0" size="small" />
              {{ state.text.Seconds.interval[2] || '' }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.second.cronEvery" class="long" label="3">
              {{ state.text.Seconds.specific }}
              <el-select v-model="state.second.specificSpecific" multiple size="small">
                <el-option v-for="(val, index) in 60" :key="index" :value="val - 1">{{ val - 1 }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.second.cronEvery" label="4">
              {{ state.text.Seconds.cycle[0] }}
              <el-input-number v-model="state.second.rangeStart" :max="60" :min="1" size="small" />
              {{ state.text.Seconds.cycle[1] || '' }}
              <el-input-number v-model="state.second.rangeEnd" :max="59" :min="0" size="small" />
              {{ state.text.Seconds.cycle[2] || '' }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span>
            <i class="el-icon-date"></i>
            {{ state.text.Minutes.name }}
          </span>
        </template>
        <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
          <el-row>
            <el-radio v-model="state.minute.cronEvery" label="1">{{ state.text.Minutes.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.minute.cronEvery" label="2">
              {{ state.text.Minutes.interval[0] }}
              <el-input-number v-model="state.minute.incrementIncrement" :max="60" :min="1" size="small" />
              {{ state.text.Minutes.interval[1] }}
              <el-input-number v-model="state.minute.incrementStart" :max="59" :min="0" size="small" />
              {{ state.text.Minutes.interval[2] || '' }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.minute.cronEvery" class="long" label="3">
              {{ state.text.Minutes.specific }}
              <el-select v-model="state.minute.specificSpecific" multiple size="small">
                <el-option v-for="(val, index) in 60" :key="index" :value="val - 1">{{ val - 1 }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.minute.cronEvery" label="4">
              {{ state.text.Minutes.cycle[0] }}
              <el-input-number v-model="state.minute.rangeStart" :max="60" :min="1" size="small" />
              {{ state.text.Minutes.cycle[1] }}
              <el-input-number v-model="state.minute.rangeEnd" :max="59" :min="0" size="small" />
              {{ state.text.Minutes.cycle[2] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span>
            <i class="el-icon-date"></i>
            {{ state.text.Hours.name }}
          </span>
        </template>
        <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
          <el-row>
            <el-radio v-model="state.hour.cronEvery" label="1">{{ state.text.Hours.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.hour.cronEvery" label="2">
              {{ state.text.Hours.interval[0] }}
              <el-input-number v-model="state.hour.incrementIncrement" :max="23" :min="0" size="small" />
              {{ state.text.Hours.interval[1] }}
              <el-input-number v-model="state.hour.incrementStart" :max="23" :min="0" size="small" />
              {{ state.text.Hours.interval[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.hour.cronEvery" class="long" label="3">
              {{ state.text.Hours.specific }}
              <el-select v-model="state.hour.specificSpecific" multiple size="small">
                <el-option v-for="(val, index) in 24" :key="index" :value="val - 1">{{ val - 1 }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.hour.cronEvery" label="4">
              {{ state.text.Hours.cycle[0] }}
              <el-input-number v-model="state.hour.rangeStart" :max="23" :min="0" size="small" />
              {{ state.text.Hours.cycle[1] }}
              <el-input-number v-model="state.hour.rangeEnd" :max="23" :min="0" size="small" />
              {{ state.text.Hours.cycle[2] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span>
            <i class="el-icon-date"></i>
            {{ state.text.Day.name }}
          </span>
        </template>
        <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="1">{{ state.text.Day.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="2">
              {{ state.text.Day.intervalWeek[0] }}
              <el-input-number v-model="state.week.incrementIncrement" :max="7" :min="1" size="small" />
              {{ state.text.Day.intervalWeek[1] }}
              <el-select v-model="state.week.incrementStart" size="small">
                <el-option v-for="(val, index) in 7" :key="index" :label="state.text.Week[val - 1]" :value="val" />
              </el-select>
              {{ state.text.Day.intervalWeek[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="3">
              {{ state.text.Day.intervalDay[0] }}
              <el-input-number v-model="state.day.incrementIncrement" :max="31" :min="1" size="small" />
              {{ state.text.Day.intervalDay[1] }}
              <el-input-number v-model="state.day.incrementStart" :max="31" :min="1" size="small" />
              {{ state.text.Day.intervalDay[2] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" class="long" label="4">
              {{ state.text.Day.specificWeek }}
              <el-select v-model="state.week.specificSpecific" multiple size="small">
                <el-option
                  v-for="(val, index) in 7"
                  :key="index"
                  :label="state.text.Week[val - 1]"
                  :value="['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][val - 1]"
                />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" class="long" label="5">
              {{ state.text.Day.specificDay }}
              <el-select v-model="state.day.specificSpecific" multiple size="small">
                <el-option v-for="(val, index) in 31" :key="index" :value="val">{{ val }}</el-option>
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="6">{{ state.text.Day.lastDay }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="7">{{ state.text.Day.lastWeekday }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="8">
              {{ state.text.Day.lastWeek[0] }}
              <el-select v-model="state.day.cronLastSpecificDomDay" size="small">
                <el-option v-for="(val, index) in 7" :key="index" :label="state.text.Week[val - 1]" :value="val" />
              </el-select>
              {{ state.text.Day.lastWeek[1] || '' }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="9">
              <el-input-number v-model="state.day.cronDaysBeforeEomMinus" :max="31" :min="1" size="small" />
              {{ state.text.Day.beforeEndMonth[0] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="10">
              {{ state.text.Day.nearestWeekday[0] }}
              <el-input-number v-model="state.day.cronDaysNearestWeekday" :max="31" :min="1" size="small" />
              {{ state.text.Day.nearestWeekday[1] }}
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="11">
              {{ state.text.Day.someWeekday[0] }}
              <el-input-number v-model="state.week.cronNthDayNth" :max="5" :min="1" size="small" />
              <el-select v-model="state.week.cronNthDayDay" size="small">
                <el-option v-for="(val, index) in 7" :key="index" :label="state.text.Week[val - 1]" :value="val" />
              </el-select>
              {{ state.text.Day.someWeekday[1] }}
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span>
            <i class="el-icon-date"></i>
            {{ state.text.Month.name }}
          </span>
        </template>
        <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
          <el-row>
            <el-radio v-model="state.month.cronEvery" label="1">{{ state.text.Month.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.month.cronEvery" label="2">
              {{ state.text.Month.interval[0] }}
              <el-input-number v-model="state.month.incrementIncrement" :max="12" :min="0" size="small" />
              {{ state.text.Month.interval[1] }}
              <el-input-number v-model="state.month.incrementStart" :max="12" :min="0" size="small" />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.month.cronEvery" class="long" label="3">
              {{ state.text.Month.specific }}
              <el-select v-model="state.month.specificSpecific" multiple size="small">
                <el-option v-for="(val, index) in 12" :key="index" :label="val" :value="val" />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.month.cronEvery" label="4">
              {{ state.text.Month.cycle[0] }}
              <el-input-number v-model="state.month.rangeStart" :max="12" :min="1" size="small" />
              {{ state.text.Month.cycle[1] }}
              <el-input-number v-model="state.month.rangeEnd" :max="12" :min="1" size="small" />
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span>
            <i class="el-icon-date"></i>
            {{ state.text.Year.name }}
          </span>
        </template>
        <div class="tabBody myScroller" :style="{ 'max-height': maxHeight }">
          <el-row>
            <el-radio v-model="state.year.cronEvery" label="1">{{ state.text.Year.every }}</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.year.cronEvery" label="2">
              {{ state.text.Year.interval[0] }}
              <el-input-number v-model="state.year.incrementIncrement" :max="99" :min="1" size="small" />
              {{ state.text.Year.interval[1] }}
              <el-input-number v-model="state.year.incrementStart" :max="2118" :min="2018" size="small" />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.year.cronEvery" class="long" label="3">
              {{ state.text.Year.specific }}
              <el-select v-model="state.year.specificSpecific" filterable multiple size="small">
                <el-option v-for="(val, index) in 100" :key="index" :label="2017 + val" :value="2017 + val" />
              </el-select>
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.year.cronEvery" label="4">
              {{ state.text.Year.cycle[0] }}
              <el-input-number v-model="state.year.rangeStart" :max="2118" :min="2018" size="small" />
              {{ state.text.Year.cycle[1] }}
              <el-input-number v-model="state.year.rangeEnd" :max="2118" :min="2018" size="small" />
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="bottom">
      <div class="value">
        <span>cron预览:</span>
        <el-tag>
          {{ state.cron }}
        </el-tag>
      </div>
      <div class="buttonDiv">
        <el-button size="mini" type="primary" @click.stop="handleChange">{{ state.text.Save }}</el-button>
        <el-button size="mini" type="primary" @click="close">{{ state.text.Close }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import Language from './language'
  import { reactive, computed, defineComponent, toRefs } from 'vue'
  const echoFn = (str) => {
    let echoStr = '1'
    if (str) {
      if (str == '*') {
        echoStr = '1'
      } else if (str.indexOf('/') > -1) {
        echoStr = '2'
      } else if (str.indexOf(',') > -1 || Number(str, 10).toString() != 'NaN') {
        echoStr = '3'
      } else if (str.indexOf('-') > -1) {
        echoStr = '4'
      }
    }
    return echoStr
  }
  const setValue = (str) => {
    let stratNum = 3
    let endNum = 5
    if (str) {
      if (str.indexOf('/') > -1) {
        stratNum = str.split('/')[0]
        endNum = str.split('/')[1]
      }
    }

    return { stratNum: Number(stratNum), endNum: Number(endNum) }
  }
  const thirdVal = (str) => {
    let list = []
    list = str ? str.split(',') : []
    return list
  }
  const fourthVal = (str) => {
    let stratNum = 0
    let endNum = 0
    if (str && str.indexOf('-') > -1) {
      stratNum = str.split('-')[0]
      endNum = str.split('-')[1]
    }
    return { stratNum: Number(stratNum), endNum: Number(endNum) }
  }
  const isWeek = (str) => {
    let open = false
    let strArr = str.split(',')
    const list = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
    for (let index = 0; index < strArr.length; index++) {
      const element = strArr[index]
      if (list.find((el) => el == element)) {
        open = true
        break
      }
    }
    return open
  }
  const setDayEvery = (list) => {
    let numStr = '1'
    let dayIncrementStart = 1
    let dayIncrementIncrement = 1
    let dayspecificSpecific = []
    let daycronLastSpecificDomDay = 1
    let daycronDaysBeforeEomMinus = 0
    let daycronDaysNearestWeekday = 0
    let weekIncrementStart = 1
    let weekIncrementIncrement = 1
    let specificSpecific = []
    let cronNthDayDay = 1
    let cronNthDayNth = 1
    if (list.length > 0) {
      if (list[3] == '*' && list[5] == '?') {
        numStr = '1'
      } else if (list[3] == '?' && list[5].indexOf('/') > -1) {
        numStr = '2'
        weekIncrementStart = list[5].split('/')[0] - 0
        weekIncrementIncrement = list[5].split('/')[1] - 0
      } else if (list[3] && list[3].indexOf('/') > -1 && list[5] == '?') {
        numStr = '3'
        dayIncrementStart = list[3].split('/')[0] - 0
        dayIncrementIncrement = list[3].split('/')[1] - 0
      } else if (list[3] == '?' && isWeek(list[5])) {
        numStr = '4'
        specificSpecific = list[5].split(',')
      } else if (((list[3] && list[3].indexOf(',') > -1) || Number(list[3], 10).toString() != 'NaN') && list[5] == '?') {
        numStr = '5'
        dayspecificSpecific = list[3].split(',')
      } else if (list[3] == 'L' && list[5] == '?') {
        numStr = '6'
      } else if (list[3] == 'LW' && list[5] == '?') {
        numStr = '7'
      } else if (list[3] && list[3][1] == 'L' && list[5] == '?') {
        numStr = '8'
        daycronLastSpecificDomDay = list[3][0] - 0
      } else if (list[3] && list[3].indexOf('L') > -1 && list[3].split('-') && list[5] == '?') {
        numStr = '9'
        daycronDaysBeforeEomMinus = list[3].split('-')[1] - 0
      } else if (list[3] && list[3].indexOf('W') > -1 && list[3] != 'LW' && list[5] == '?') {
        numStr = '10'
        daycronDaysNearestWeekday = list[3][0] - 0
      } else if (list[3] == '?' && list[5].indexOf('#') > -1) {
        numStr = '11'
        cronNthDayDay = list[5].split('#')[0] - 0
        cronNthDayNth = list[5].split('#')[1] - 0
      }
    }

    return {
      numStr,
      dayIncrementStart,
      dayIncrementIncrement,
      dayspecificSpecific,
      daycronLastSpecificDomDay,
      daycronDaysBeforeEomMinus,
      daycronDaysNearestWeekday,
      weekIncrementStart,
      weekIncrementIncrement,
      specificSpecific,
      cronNthDayDay,
      cronNthDayNth,
    }
  }
  export default defineComponent({
    name: 'Vue3Cron',
    props: {
      cronValue: {
        type: String,
        default: '',
      },
      i18n: {
        type: String,
        default: function () {
          return 'cn'
        },
      },
      maxHeight: {
        type: String,
        default: function () {
          return '200px'
        },
      },
    },
    emits: ['close', 'change'],
    setup(props, { emit }) {
      const { i18n } = toRefs(props)
      const { cronValue } = toRefs(props)
      const valList = cronValue.value.split(' ')
      // setDayEvery(valList)
      const state = reactive({
        language: i18n.value,
        second: {
          cronEvery: valList.length > 0 ? echoFn(valList[0]) : '1',
          incrementStart: valList.length > 0 ? setValue(valList[0]).stratNum : 3,
          incrementIncrement: valList.length > 0 ? setValue(valList[0]).endNum : 5,
          rangeStart: valList.length > 0 ? fourthVal(valList[0]).stratNum : 0,
          rangeEnd: valList.length > 0 ? fourthVal(valList[0]).endNum : 0,
          specificSpecific: valList.length > 0 ? thirdVal(valList[0]) : [],
        },
        minute: {
          cronEvery: valList.length > 0 ? echoFn(valList[1]) : '1',
          incrementStart: valList.length > 0 ? setValue(valList[1]).stratNum : 3,
          incrementIncrement: valList.length > 0 ? setValue(valList[1]).endNum : 5,
          rangeStart: valList.length > 0 ? fourthVal(valList[1]).stratNum : 0,
          rangeEnd: valList.length > 0 ? fourthVal(valList[1]).endNum : 0,
          specificSpecific: valList.length > 0 ? thirdVal(valList[1]) : [],
        },
        hour: {
          cronEvery: valList.length > 0 ? echoFn(valList[2]) : '1',
          incrementStart: valList.length > 0 ? setValue(valList[2]).stratNum : 3,
          incrementIncrement: valList.length > 0 ? setValue(valList[2]).endNum : 5,
          rangeStart: valList.length > 0 ? fourthVal(valList[2]).stratNum : 0,
          rangeEnd: valList.length > 0 ? fourthVal(valList[2]).endNum : 0,
          specificSpecific: valList.length > 0 ? thirdVal(valList[2]) : [],
        },
        day: {
          cronEvery: setDayEvery(valList).numStr,
          incrementStart: setDayEvery(valList).dayIncrementStart,
          incrementIncrement: setDayEvery(valList).dayIncrementIncrement,
          rangeStart: 0,
          rangeEnd: 0,
          specificSpecific: setDayEvery(valList).dayspecificSpecific,
          cronLastSpecificDomDay: setDayEvery(valList).daycronLastSpecificDomDay,
          cronDaysBeforeEomMinus: setDayEvery(valList).daycronDaysBeforeEomMinus,
          cronDaysNearestWeekday: setDayEvery(valList).daycronDaysNearestWeekday,
        },
        week: {
          cronEvery: '1',
          incrementStart: setDayEvery(valList).weekIncrementStart,
          incrementIncrement: setDayEvery(valList).weekIncrementIncrement,
          specificSpecific: setDayEvery(valList).specificSpecific,
          cronNthDayDay: setDayEvery(valList).cronNthDayDay,
          cronNthDayNth: setDayEvery(valList).cronNthDayNth,
        },
        month: {
          cronEvery: valList.length > 0 ? echoFn(valList[4]) : '1',
          incrementStart: valList.length > 0 ? setValue(valList[4]).stratNum : 3,
          incrementIncrement: valList.length > 0 ? setValue(valList[4]).endNum : 5,
          rangeStart: valList.length > 0 ? fourthVal(valList[4]).stratNum : 0,
          rangeEnd: valList.length > 0 ? fourthVal(valList[4]).endNum : 0,
          specificSpecific: valList.length > 0 ? thirdVal(valList[4]) : [],
        },
        year: {
          cronEvery: valList.length > 0 && valList.length == 7 ? echoFn(valList[valList.length - 1]) : '1',
          incrementStart: valList.length > 0 && valList.length == 7 ? setValue(valList[valList.length - 1]).stratNum : 3,
          incrementIncrement: valList.length > 0 && valList.length == 7 ? setValue(valList[valList.length - 1]).endNum : 5,
          rangeStart: valList.length > 0 && valList.length == 7 ? fourthVal(valList[valList.length - 1]).stratNum : 0,
          rangeEnd: valList.length > 0 && valList.length == 7 ? fourthVal(valList[valList.length - 1]).endNum : 0,
          specificSpecific: valList.length > 0 && valList.length == 7 ? thirdVal(valList[valList.length - 1]) : [],
        },
        output: {
          second: '',
          minute: '',
          hour: '',
          day: '',
          month: '',
          Week: '',
          year: '',
        },
        text: computed(() => Language[state.language || 'cn']),
        secondsText: computed(() => {
          let seconds = ''
          let cronEvery = state.second.cronEvery
          switch (cronEvery.toString()) {
            case '1':
              seconds = '*'
              break
            case '2':
              seconds = state.second.incrementStart + '/' + state.second.incrementIncrement
              break
            case '3':
              state.second.specificSpecific.map((val) => {
                seconds += val + ','
              })
              seconds = seconds.slice(0, -1)
              break
            case '4':
              seconds = state.second.rangeStart + '-' + state.second.rangeEnd
              break
          }
          return seconds
        }),
        minutesText: computed(() => {
          let minutes = ''
          let cronEvery = state.minute.cronEvery
          switch (cronEvery.toString()) {
            case '1':
              minutes = '*'
              break
            case '2':
              minutes = state.minute.incrementStart + '/' + state.minute.incrementIncrement
              break
            case '3':
              state.minute.specificSpecific.map((val) => {
                minutes += val + ','
              })
              minutes = minutes.slice(0, -1)
              break
            case '4':
              minutes = state.minute.rangeStart + '-' + state.minute.rangeEnd
              break
          }
          return minutes
        }),
        hoursText: computed(() => {
          let hours = ''
          let cronEvery = state.hour.cronEvery
          switch (cronEvery.toString()) {
            case '1':
              hours = '*'
              break
            case '2':
              hours = state.hour.incrementStart + '/' + state.hour.incrementIncrement
              break
            case '3':
              state.hour.specificSpecific.map((val) => {
                hours += val + ','
              })
              hours = hours.slice(0, -1)
              break
            case '4':
              hours = state.hour.rangeStart + '-' + state.hour.rangeEnd
              break
          }
          return hours
        }),
        daysText: computed(() => {
          let days = ''
          let cronEvery = state.day.cronEvery
          switch (cronEvery.toString()) {
            case '1':
              break
            case '2':
            case '4':
            case '11':
              days = '?'
              break
            case '3':
              days = state.day.incrementStart + '/' + state.day.incrementIncrement
              break
            case '5':
              state.day.specificSpecific.map((val) => {
                days += val + ','
              })
              days = days.slice(0, -1)
              break
            case '6':
              days = 'L'
              break
            case '7':
              days = 'LW'
              break
            case '8':
              days = state.day.cronLastSpecificDomDay + 'L'
              break
            case '9':
              days = 'L-' + state.day.cronDaysBeforeEomMinus
              break
            case '10':
              days = state.day.cronDaysNearestWeekday + 'W'
              break
          }
          return days
        }),
        weeksText: computed(() => {
          let weeks = ''
          let cronEvery = state.day.cronEvery
          switch (cronEvery.toString()) {
            case '1':
            case '3':
            case '5':
              weeks = '?'
              break
            case '2':
              weeks = state.week.incrementStart + '/' + state.week.incrementIncrement
              break
            case '4':
              state.week.specificSpecific.map((val) => {
                weeks += val + ','
              })
              weeks = weeks.slice(0, -1)
              break
            case '6':
            case '7':
            case '8':
            case '9':
            case '10':
              weeks = '?'
              break
            case '11':
              weeks = state.week.cronNthDayDay + '#' + state.week.cronNthDayNth
              break
          }
          return weeks
        }),
        monthsText: computed(() => {
          let months = ''
          let cronEvery = state.month.cronEvery
          switch (cronEvery.toString()) {
            case '1':
              months = '*'
              break
            case '2':
              months = state.month.incrementStart + '/' + state.month.incrementIncrement
              break
            case '3':
              state.month.specificSpecific.map((val) => {
                months += val + ','
              })
              months = months.slice(0, -1)
              break
            case '4':
              months = state.month.rangeStart + '-' + state.month.rangeEnd
              break
          }
          return months
        }),
        yearsText: computed(() => {
          let years = ''
          let cronEvery = state.year.cronEvery
          switch (cronEvery.toString()) {
            case '1':
              years = '*'
              break
            case '2':
              years = state.year.incrementStart + '/' + state.year.incrementIncrement
              break
            case '3':
              state.year.specificSpecific.map((val) => {
                years += val + ','
              })
              years = years.slice(0, -1)
              break
            case '4':
              years = state.year.rangeStart + '-' + state.year.rangeEnd
              break
          }
          return years
        }),
        cron: computed(() => {
          return `${state.secondsText || '*'} ${state.minutesText || '*'} ${state.hoursText || '*'} ${state.daysText || '*'} ${
            state.monthsText || '*'
          } ${state.weeksText || '?'} ${state.yearsText || '*'}`
        }),
      })
      const getValue = () => {
        return state.cron
      }
      const close = () => {
        emit('close')
      }
      const handleChange = () => {
        emit('change', state.cron)
        close()
      }
      const rest = (data) => {
        for (let i in data) {
          if (data[i] instanceof Object) {
            this.rest(data[i])
          } else {
            switch (typeof data[i]) {
              case 'object':
                data[i] = []
                break
              case 'string':
                data[i] = ''
                break
            }
          }
        }
      }
      return {
        state,
        getValue,
        close,
        handleChange,
        rest,
      }
    },
  })
</script>

<style lang="scss">
  .vue3-cron-div {
    overflow-y: auto;
    max-height: 360px;
    .el-input-number__decrease,
    .el-input-number__increase {
      top: 2px !important;
    }
    .language {
      position: absolute;
      right: 25px;
      z-index: 1;
    }
    .el-tabs {
      box-shadow: none;
    }
    .tabBody {
      overflow: auto;
      .el-row {
        margin: 20px 0;
        .long {
          .el-select {
            width: 350px;
          }
        }
        .el-input-number {
          width: 110px;
        }
      }
    }
    .myScroller {
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent
        );
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ededed;
        border-radius: 10px;
      }
    }
    .bottom {
      width: 100%;
      margin-top: 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .value {
        float: left;
        font-size: 14px;
        vertical-align: middle;
        span:nth-child(1) {
          color: red;
        }
      }
    }
  }
</style>
